<template>
  <Header class="topic">
    <div class="max-cont">
      <div class="layout-logo">
        <div class="logo-div">
          <img class="logo-img" src="~@/assets/logo.png"/>
        </div>
      </div>
      <div class="menu-list" v-if="!isShow">
        <Menu
          mode="horizontal"
          theme="dark"
          class="hd-menu"
          :active-name="activeTab"
          @on-select="selectTab"
        >
          <MenuItem name="official" to="/" :class="activeTab === 'official'?'menu_item':''">
            <Icon type="ios-home" size="18"></Icon>
            首页
          </MenuItem>
          <MenuItem name="demo" to="/demo" :class="activeTab === 'demo'?'menu_item':''">
            <Icon type="md-link" size="18"/>
            项目实例
          </MenuItem>
          <MenuItem name="backend" to="/backend" :class="activeTab === 'backend'?'menu_item':''">
            <Icon type="md-grid" size="18"/>
            后台管理
          </MenuItem>
          <MenuItem name="about" to="/ecosphere" :class="activeTab === 'docs'?'menu_item':''">
            <Icon type="md-book" size="18"/>
            文档
          </MenuItem>
          <MenuItem name="about" to="/about" :class="activeTab === 'about'?'menu_item':''">
            <Icon type="ios-at" size="18"/>
            关于我
          </MenuItem>
        </Menu>
      </div>
      <div class="sys-option" v-if="isShow">
        <Button type="primary" @click="backLogin">
          <Icon type="ios-arrow-back"></Icon>
          返回
        </Button>
      </div>
    </div>
  </Header>
</template>

<script>

  export default {
    name: 'vTopic',
    props: {
      showlogin: {
        type: Boolean,
        default: false
      },
      label: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        isShow: false,
        activeTab: ''
      }
    },
    methods: {
      backLogin: function () {
        this.$router.replace('/')
      },
      selectTab: function (tab) {
        this.activeTab = tab
      }
    },
    created() {
      this.isShow = this.showlogin
      this.activeTab = this.label
    }
  }
</script>

<style scoped lang="scss">
  .topic{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    z-index:99;
    padding: 0;
    .layout-logo {
      height: 60px;
      width: 230px;
      float: left;
      padding: 10px;
      box-sizing: border-box;

      .logo-div {
        height: 100%;
        display: inline-block;

        .logo-img {
          height: 100%;
          display: block;
          margin: 0 auto;
        }
      }
    }

    .menu-list {
      display: inline-block;

      .hd-menu {
        height: 62px;
        line-height: 62px;
      }

      .menu_item {
        background-color: #222E4A;
        border-top: 2px solid #0e8694;
        color: #0e8694;
      }
    }

    .sys-option {
      float: right;
      height: 60px;
      margin-right: 30px;
    }
  }
</style>
